/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import type {FC} from 'react';
import {TouchableOpacity, Text, StyleSheet, View, useWindowDimensions} from 'react-native';
import Icon from '../Icon';

const Item = require('../../../assets/common/icon_item.png');
const ARROW = require('../../../assets/common/icon_arrow.png');

/** cell 组件入参 */
type CellProps = {
  /** cell组件标题 */
  title: string;
  /** cell组件Press事件 */
  onPress: () => void;
  /** cell排列方向 */
  flexDirection: 'row' | 'column';
  colorScheme: 'light' | 'dark';
};

/**
 * @description cell组件
 * @param CellProps
 * @returns 
 */
const Cell: FC<CellProps> = ({title, onPress, flexDirection, colorScheme}) => {
  return (
    <TouchableOpacity 
    style={[
    styles.container, 
        {opacity: title === '' ? 0 : 1, height: title === '' ? 0 : 48},
        {backgroundColor: colorScheme === 'dark' ? '#333333' : 'rgba(255, 255, 255, 1)'}
    ]} 
    onPress={onPress}>
      <View accessibilityViewIsModal style={styles.block}>
        {
          flexDirection === 'column' && (
            <Icon width={24} height={24} source={Item} />
          )
        }
        <Text numberOfLines={1} style={[styles.text, {color: colorScheme === 'dark' ? '#fff' : '#000'}]}>
          {title}
        </Text>
      </View>
      <Icon width={12} height={24} source={ARROW} />
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 12,
    height: 48,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    backgroundColor: 'rgba(255, 255, 255, 1)',
    borderRadius: 16,

  },
  block: {
    flex: 1,
    flexDirection: 'row',
    columnGap: 4,
    alignItems: 'center',
  },
  text: {
    fontFamily: 'HarmonyHeiTi',
    fontWeight: '500',
    fontSize: 16,
    lineHeight: 21,
    color: 'rgba(0, 0, 0, 0.9)',
  }
})

export default Cell;
